<html>

<head>
    <link rel="stylesheet" href="./player.css">
    <!-- <script src="https://player.vimeo.com/api/player.js"></script> -->
    <script src="./vimeo_player.js"></script>
</head>

<body class="oneline-player">
    <div class="oneline-wrap">
        <video id="video" style="display: none" class="oneline" playsinline></video>
        <div id="embed-video"></div>
        <div class="oneline-error-box">
            <div class="oneline-error-message"></div>
        </div>
        <div class="oneline-poster" style="display: none"></div>
        <div class="oneline-overlay" style="display: none"></div>
        <div class="oneline-play-pause" style="display: none">
            <button aria-label="Play">
                <svg class="oneline-play-button" width="29px" height="29px" viewBox="-3 0 26 29" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.9">
                        <g class="oneline-icon" id="VideoPlayer-2.0" transform="translate(-308.000000, -226.000000)"
                            fill="#EFEFEF" fill-rule="nonzero">
                            <g>
                                <path
                                    d="M308,252.742128 L308,228.216201 C308,227.111631 308.895431,226.216201 310,226.216201 C310.395737,226.216201 310.782578,226.333602 311.111565,226.553545 L329.506011,238.85112 C330.42427,239.46502 330.671002,240.707081 330.057101,241.62534 C329.910345,241.844855 329.721572,242.033137 329.501676,242.179321 L311.10723,254.407674 C310.187374,255.01918 308.945961,254.769213 308.334454,253.849358 C308.116351,253.521277 308,253.13609 308,252.742128 Z"
                                    id="Path"></path>
                            </g>
                        </g>
                    </g>
                </svg>
                <svg class="oneline-pause-button" width="20px" height="20px" viewBox="-1 0 19 20" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.9">
                        <g class="oneline-icon" transform="translate(-1034.000000, -1137.000000)" fill="#EFEFEF">
                            <g transform="translate(920.000000, 331.000000)">
                                <g transform="translate(0.000000, 656.000000)">
                                    <g transform="translate(87.000000, 60.000000)">
                                        <path
                                            d="M29,90 L30.3333333,90 C31.4379028,90 32.3333333,90.8954305 32.3333333,92 L32.3333333,108 C32.3333333,109.104569 31.4379028,110 30.3333333,110 L29,110 C27.8954305,110 27,109.104569 27,108 L27,92 C27,90.8954305 27.8954305,90 29,90 Z M40.3333333,90 L41.6666667,90 C42.7712362,90 43.6666667,90.8954305 43.6666667,92 L43.6666667,108 C43.6666667,109.104569 42.7712362,110 41.6666667,110 L40.3333333,110 C39.2287638,110 38.3333333,109.104569 38.3333333,108 L38.3333333,92 C38.3333333,90.8954305 39.2287638,90 40.3333333,90 Z">
                                        </path>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                </svg>
            </button>
        </div>
        <div class="oneline-loader-container">
            <div class="la-ball-pulse">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <div class="oneline-controls">
            <div class="oneline-time" style="display: none"></div>
            <div class="oneline-progress" style="display: none" tabindex="0" role="slider"
                aria-orientation="horizontal">
                <div class="oneline-progress-fill-bg">
                    <div class="oneline-progress-fill"></div>
                </div>
                <div class="oneline-progress-seek-fill"></div>
                <svg class="ring" width="120" height="120">
                    <circle class="ring-circle ring-bg" stroke="white" stroke-width="4" fill="transparent" r="52"
                        cx="60" cy="60" />
                    <circle class="ring-circle ring-fill" stroke="red" stroke-width="4" fill="transparent" r="52"
                        cx="60" cy="60" />
                    <circle class="ring-circle ring-seek" stroke="blue" stroke-width="4" fill="transparent" r="52"
                        cx="60" cy="60" />
                </svg>
            </div>
            <div class="oneline-control-buttons">
                <button class="oneline-mute-button" style="display: none">
                    <svg class="mute" width="16px" height="20px" viewBox="0 0 16 20" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <title>Mute</title>
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g transform="translate(-1392.000000, -1231.000000)" fill="#FFFFFF" fill-rule="nonzero">
                                <g transform="translate(802.000000, 794.000000)">
                                    <path
                                        d="M602.985222,437 L602.985222,456.123535 L600.787842,456.123535 L592.44458,450.014526 L590,450.014526 L590,442.986084 L592.44458,442.986084 L600.787842,437 L602.985222,437 Z M606,444 L606,449 L604,449 L604,444 L606,444 Z">
                                    </path>
                                </g>
                            </g>
                        </g>
                    </svg>
                    <svg class="unmute" width="16px" height="20px" viewBox="0 0 16 20" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <title>Unmute</title>
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g transform="translate(-1392.000000, -1197.000000)" fill="#FFFFFF" fill-rule="nonzero">
                                <g transform="translate(802.000000, 794.000000)">
                                    <path
                                        d="M602.985,411.757 L602.985222,422.123535 L600.787842,422.123535 L596.072,418.67 L602.985,411.757 Z M606.424621,403.368272 L607.838835,404.782486 L592.282486,420.338835 L590.868272,418.924621 L606.424621,403.368272 Z M602.985222,403 L602.985,404.687 L591.658,416.014 L590,416.014526 L590,408.986084 L592.44458,408.986084 L600.787842,403 L602.985222,403 Z M606,410 L606,415 L604,415 L604,410.742 L604.743,409.999 L606,410 Z">
                                    </path>
                                </g>
                            </g>
                        </g>
                    </svg>
                </button>
                <button class="oneline-fullscreen-button" style="display: none">
                    <svg width="19px" class="fullscreen-icon-on" height="19px" viewBox="0 0 19 19" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <title>Fullscreen</title>
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g transform="translate(-1351.000000, -1231.000000)" fill="#FFFFFF">
                                <g transform="translate(802.000000, 794.000000)">
                                    <path
                                        d="M554.971733,448.344364 C555.432291,447.885212 556.177464,447.885212 556.638022,448.344364 L556.638022,448.344364 L556.654581,448.36091 C557.11514,448.821096 557.11514,449.566701 556.654581,450.025853 L556.654581,450.025853 L554.013357,452.664943 C553.750477,452.928645 553.750477,453.354705 554.013357,453.618407 L554.013357,453.618407 L555.245998,454.850052 C555.671367,455.274043 555.370193,456 554.769915,456 L554.769915,456 L549,456 L549,450.234747 C549,449.634953 549.726544,449.334023 550.150878,449.759049 L550.150878,449.759049 L551.377308,450.983454 C551.640189,451.247156 552.067628,451.247156 552.330509,450.983454 L552.330509,450.983454 Z M568,437 L568,442.764694 C568,443.36443 567.273456,443.665331 566.849122,443.240346 L566.849122,443.240346 L565.622692,442.01606 C565.359811,441.753417 564.932372,441.753417 564.669491,442.01606 L564.669491,442.01606 L562.028267,444.654894 C561.567709,445.115035 560.822536,445.115035 560.361978,444.654894 L560.361978,444.654894 L560.345419,444.638349 C559.88486,444.178208 559.88486,443.433709 560.345419,442.973568 L560.345419,442.973568 L562.986643,440.334734 C563.249523,440.071057 563.249523,439.645038 562.986643,439.381362 L562.986643,439.381362 L561.752967,438.149837 C561.328633,437.725886 561.629807,437 562.230085,437 L562.230085,437 L568,437 Z">
                                    </path>
                                </g>
                            </g>
                        </g>
                    </svg>
                    <svg class="fullscreen-icon-off" width="19px" height="19px" viewBox="0 0 19 19" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g transform="translate(-1351.000000, -1197.000000)" fill="#FFFFFF">
                                <g transform="translate(802.000000, 794.000000)">
                                    <path
                                        d="M557,414 L557,419.764694 C557,420.36443 556.273456,420.665331 555.849122,420.240346 L555.849122,420.240346 L554.622692,419.01606 C554.359811,418.753417 553.932372,418.753417 553.669491,419.01606 L553.669491,419.01606 L551.028267,421.654894 C550.567709,422.115035 549.822536,422.115035 549.361978,421.654894 L549.361978,421.654894 L549.345419,421.638349 C548.88486,421.178208 548.88486,420.433709 549.345419,419.973568 L549.345419,419.973568 L551.986643,417.334734 C552.249523,417.071057 552.249523,416.645038 551.986643,416.381362 L551.986643,416.381362 L550.752967,415.149837 C550.328633,414.725886 550.629807,414 551.230085,414 L551.230085,414 L557,414 Z M565.971733,403.344364 C566.432291,402.885212 567.177464,402.885212 567.638022,403.344364 L567.638022,403.344364 L567.654581,403.36091 C568.11514,403.821096 568.11514,404.566701 567.654581,405.025853 L567.654581,405.025853 L565.013357,407.664943 C564.750477,407.928645 564.750477,408.354705 565.013357,408.618407 L565.013357,408.618407 L566.245998,409.850052 C566.671367,410.274043 566.370193,411 565.769915,411 L565.769915,411 L560,411 L560,405.234747 C560,404.634953 560.726544,404.334023 561.150878,404.759049 L561.150878,404.759049 L562.377308,405.983454 C562.640189,406.247156 563.067628,406.247156 563.330509,405.983454 L563.330509,405.983454 Z">
                                    </path>
                                </g>
                            </g>
                        </g>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <script src="./player.js"></script>
    <script>
        init()
    </script>
</body>

</html>